<template>
  <n-page-header
    class="px-4 py-3 sticky top-0 z-10 bg-white dark:bg-[#101014]"
    title="设置提醒"
    @back="handleBack"
  >
    <template #extra>
      <n-button
        strong
        secondary
        round
        size="small"
        type="info"
        @click="show = true"
        >创建</n-button
      >
    </template>
  </n-page-header>
  <n-divider class="!m-0" />
  <div>
    <div v-for="item in list" :key="item.id" class="m-4">
      <div class="flex justify-between items-center remind-item">
        <div>
          <div class="text-lg font-bold">{{ item.title }}</div>
          <div class="text-sm text-gray-500">{{ item.schedule }}</div>
        </div>
        <div>
          <n-button quaternary type="error" @click="handleDelete(item.id)">
            删除
          </n-button>
        </div>
      </div>
    </div>
  </div>
  <Modal v-model="show" title="创建提醒">
    <template #content>
      <Schedule @save="handleSave" />
    </template>
  </Modal>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { computed, ref } from 'vue'
import { useMessage } from 'naive-ui'
import type { RemindType } from '@/api/interface'
import Schedule from './components/Schedule/index.vue'
import Modal from '@/components/Modal/index.vue'
import { useAppStore } from '@/stores/modules/app'

const router = useRouter()
const appStore = useAppStore()
const message = useMessage()

const show = ref(false)

const handleBack = () => {
  router.back()
}

const list = computed(() => appStore.remind)

const handleSave = (formData: RemindType) => {
  const data = {
    ...formData,
    id: Date.now()
  }
  appStore.addRemind(data)
  window.ipcRenderer.send('schedule', data)
  message.success('添加成功')
  show.value = false
}

const handleDelete = (id: number) => {
  appStore.deleteRemind(id)
  window.ipcRenderer.send('delete-schedule', id)
  message.success('删除成功')
}
</script>

<style lang="scss" scoped>
@use '../../styles/mixin.scss' as *;

.remind-item {
  @include Yborder-1px-after(rgb(239, 239, 245));
  padding-bottom: 10px;
}
</style>
